<template>
  <div>
    <Card>
      <div slot="title">
        <div class="edit-head">
          <a class="back-title" @click="close">
            <Icon type="ios-arrow-back"/>
            返回
          </a>
          <div class="head-name">添加</div>
          <span></span>
          <a class="window-close" @click="close">
            <Icon class="ivu-icon-ios-close" size="31" type="ios-close"/>
          </a>
        </div>
      </div>
      <div style="width: 500px">
        <Form ref="form" :label-width="100" :model="form" :rules="formValidate" label-position="left">
          <FormItem label="科研成果编号" prop="achievementId">
            <Input v-model="form.achievementId" clearable/>
          </FormItem>
          <FormItem label="科研成果名称" prop="achievementName">
            <Input v-model="form.achievementName" clearable/>
          </FormItem>
          <FormItem label="科研成果类型" prop="type">
            <!--            <Input v-model="form.type" clearable/>-->
            <Select v-model="form.type" clearable="">
              <Option value="type1">type1</Option>
              <Option value="type2">type2</Option>
            </Select>
          </FormItem>
          <FormItem label="签发单位" prop="unit">
            <Input v-model="form.unit" clearable/>
          </FormItem>
          <FormItem label="签发日期" prop="time">
            <DatePicker v-model="form.time" clearable style="width: 100%" type="date"></DatePicker>
          </FormItem>
          <FormItem label="附件" prop="file">
            <upload-pic-input v-model="form.file" style="width:570px"></upload-pic-input>
          </FormItem>
          <FormItem class="br">
            <Button :loading="submitLoading" type="primary" @click="handleSubmit">提交并保存</Button>
            <Button @click="handleReset">重置</Button>
            <Button type="dashed" @click="close">关闭</Button>
          </FormItem>
        </Form>
      </div>
    </Card>
  </div>
</template>

<script>
// 根据你的实际请求api.js位置路径修改
import {addAchievement} from "./api.js";
import uploadPicInput from "@/views/my-components/xboot/upload-file-input";

export default {
  name: "add",
  components: {
    uploadPicInput
  },
  data() {
    return {
      submitLoading: false, // 表单提交状态
      form: { // 添加或编辑表单对象初始化数据
        achievementId: "",
        achievementName: "",
        type: "",
        unit: "",
        time: "",
      },
      // 表单验证规则
      formValidate: {}
    };
  },
  methods: {
    init() {
    },
    handleReset() {
      this.$refs.form.resetFields();
    },
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (typeof this.form.time == "object") {
            this.form.time = this.format(this.form.time, "yyyy-MM-dd");
          }
          this.submitLoading = true;
          addAchievement(this.form).then(res => {
            this.submitLoading = false;
            if (res.success) {
              this.$Message.success("操作成功");
              this.submited();
            }
          });
        }
      });
    },
    close() {
      this.$emit("close", true);
    },
    submited() {
      this.$emit("submited", true);
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="less">
// 建议引入通用样式 具体路径自行修改 可删除下面样式代码
// @import "@/styles/single-common.less";
.edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  .back-title {
    color: #515a6e;
    display: flex;
    align-items: center;
  }

  .head-name {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 16px;
    color: #17233d;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .window-close {
    z-index: 1;
    font-size: 12px;
    position: absolute;
    right: 0px;
    top: -5px;
    overflow: hidden;
    cursor: pointer;

    .ivu-icon-ios-close {
      color: #999;
      transition: color .2s ease;
    }
  }

  .window-close .ivu-icon-ios-close:hover {
    color: #444;
  }
}
</style>
